<template>
  <!-- 头部 -->
  <header class="header">
    <p>分类</p>
  </header>
  <!--搜索框 -->
  <van-search
    v-model="value"
    shape="round"
    placeholder="新春大促销"
    class="search"
  />
  <!-- 内容 -->
  <main>
    <!-- 侧边栏导航 -->
    <van-sidebar v-model="active">
      <van-sidebar-item title="推建分类" class="leftnav" @click="handle(1)" />
      <van-sidebar-item title="尿不湿" class="leftnav" @click="handle(2)" />
      <van-sidebar-item title="全球奶粉" class="leftnav" @click="handle(3)" />
      <van-sidebar-item title="推建分类" class="leftnav" @click="handle(1)" />
      <van-sidebar-item title="尿不湿" class="leftnav" @click="handle(2)" />
      <van-sidebar-item title="全球奶粉" class="leftnav" @click="handle(3)" />
      <van-sidebar-item title="尿不湿" class="leftnav" @click="handle(2)" />
      <van-sidebar-item title="全球奶粉" class="leftnav" @click="handle(3)" />
      <van-sidebar-item title="尿不湿" class="leftnav" @click="handle(2)" />
    </van-sidebar>

    <ul>
      <li v-for="item in classList" :key="item" @click="gotoClass(item.productId)" >
        <div class="msgbox">
          <img :src="item.imgUrl" alt="" />
          <p>{{ item.title }}</p>
        </div>
      </li>
    </ul>
  </main>
</template>

<script>
import { classApi } from "../../../utils/api.js";
import { useRouter } from "vue-router";

import { ref, onMounted } from "vue";

export default {
  
  setup() {
    const active = ref(0);
    const classList = ref([]);

    onMounted(() => {
      classApi({ type: "1" }).then((res) => {
        console.log(res.result);
        classList.value = res.result;
      });
    });

    const handle = (num) => {
      switch (num) {
        case 1:
          classApi({ type: "1" }).then((res) => {
            classList.value = res.result;
          });
          break;
        case 2:
          classApi({ type: "2" }).then((res) => {
            classList.value = res.result;
          });
          break;
        case 3:
          classApi({ type: "3" }).then((res) => {
            classList.value = res.result;
          });
          break;
      }
    };

 const router = useRouter();
    let gotoClass = (id) => {
      router.push("/detail/" + id);
    };
 

    return { active, classList, handle,gotoClass};
  },
};
</script>

<style lang="less" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: #fff;
  z-index: 99;
  text-align: center;
  > p {
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
  }
}

.search {
  margin-top: 30px;
}
main {
  display: flex;
  .leftnav {
    font-weight: 600;
  }
  ul {
    width: 290px;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    padding-left: 5px;
    li {
      margin: 0 5px 15px 0;
      .msgbox {
        text-align: center;
        width: 80px;
        height: 100px;
        margin: 20px 10px 0 0;

        img {
          width: 70px;
          height: 70px;
        }
        p {
          color: #999;
          width: 70px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-top: 5px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
